<template>
  <div class="finance">
    <el-form ref="financeInfo" label-width="120px" size="mini" :model="financeInfo" :rules="finceRules" class="form">
      <el-form-item :label="$t('market.payadvanceamount')" prop="fpayadvanceamount">
        <el-input-number v-model.trim="financeInfo.fpayadvanceamount" class="input-width" :disabled="formDisabled" controls-position="right" :min="0.00" />
      </el-form-item>
      <el-form-item :label="$t('market.invoiceType')" prop="finvoicetype">
        <el-autocomplete
          v-model.trim="financeInfo.finvoicetypeName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          class="input-width"
          :popper-append-to-body="false"
          :disabled="formDisabled"
          @focus="getBasicUnit('SX_INVOICETYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_INVOICETYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.settleCurr')" prop="fpaycurrencyid">
        <el-input v-model.trim="financeInfo.fpaycurrencyname" class="input-width" :disabled="formDisabled" @focus="handleCurrency">
          <i v-if="isIcon" slot="suffix" class="el-input__icon el-icon-search" @click="handleCurrency" />
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('market.taxType')" prop="ftaxtype">
        <el-autocomplete
          v-model.trim="financeInfo.ftaxtypeName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          class="input-width"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_TAXTYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_TAXTYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.taxrate')" prop="ftaxrateid">
        <el-autocomplete
          v-model.trim="financeInfo.ftaxratename"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          class="input-width"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_V_UNIT_TAXRATEID')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_V_UNIT_TAXRATEID')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.settleType')" prop="fpaymenttype">
        <el-autocomplete
          v-model.trim="financeInfo.fpaymenttypename"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          class="input-width"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_SETTLETYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_SETTLETYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.taxregister')" prop="ftaxregistercode">
        <el-input v-model.trim="financeInfo.ftaxregistercode" class="input-width" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item :label="$t('market.paymentClause')" prop="fpaycondition">
        <el-autocomplete
          v-model.trim="financeInfo.fpayconditionname"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          class="input-width"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_PAYCONDITION')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_PAYCONDITION')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item :label="$t('market.tendtype')" prop="ftendtype">
        <el-autocomplete
          v-model.trim="financeInfo.ftendtypeName"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch18"
          :disabled="formDisabled"
          class="input-width"
          :popper-append-to-body="false"
          @focus="getBasicUnit('SX_TENDTYPE')"
          @select="selUnit"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="cliUnit('SX_TENDTYPE')"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
    </el-form>
    <div>
      <el-button size="mini" @click="newly">{{ $t('btn.newHang') }}<!--新增行--></el-button>
    </div>
    <jc-table :table-data="tableBankData" table-height="400px" serial :table-header="tableHeader">
      <el-table-column :label="$t('market.country2')" prop="fcountrystring" align="center">
        <template slot-scope="scope">
          <el-input v-model.trim="scope.row.fcountrystring" size="mini" :disabled="formDisabled" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.bankcode')" prop="fbankcode" align="center">
        <template slot-scope="scope">
          <el-input v-model.trim="scope.row.fbankcode" size="mini" :disabled="formDisabled" @change="bankAccount(scope.row.fbankcode, scope.$index)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.currency2')" prop="fcurrencyid" align="center">
        <template slot-scope="scope">
          <el-input v-model.trim="scope.row.fpaycurrencyname" size="mini" :disabled="formDisabled" @focus="handleCurrency(scope.$index)">
            <i v-show="isIcon" slot="suffix" class="el-input__icon el-icon-search" @click="handleCurrency(scope.$index)" />
          </el-input>
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.bankholder')" prop="fbankholder" align="center">
        <template slot-scope="scope">
          <el-input v-model.trim="scope.row.fbankholder" size="mini" :disabled="formDisabled" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('market.handle')" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" :disabled="formDisabled" @click="handleDelete(scope.$index)">{{ $t('shop.delete') }}</el-button>
        </template>
      </el-table-column>
    </jc-table>
    <!--结算币别列表-->
    <currency v-if="currencyVisiblit" @currency="currencyData" />
    <!--  数据字典弹窗  -->
    <unit v-if="unitVisabled" :msg="funit" @unit="selUnit" />
  </div>
</template>

<script>
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'

export default {
  name: 'Index',
  components: {
    currency: () => import('@/views/market/marketManage/createMarkerOrder/components/currency'),
    unit: () => import('@/views/basic/createMateriel2/components/unit')
  },
  mixins: [autocomplete],
  props: {
    tableBankData: { // 银行卡
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    financeInfo: { // 财务
      type: Object,
      default: () => {
        return {}
      }
    },
    formDisabled: {
      type: Boolean,
      default: false
    },
    isIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      funit: '',
      unitVisabled: false,
      ftype: 2052,
      fbillNo: 'fname', // 名称
      tableHeader: [],
      currencyVisiblit: false, // 币别
      total: 0, // 总条目
      tableIndex: 0, // 表格id
      finceRules: {
        finvoicetype: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
        fpaycurrencyid: [{ required: true, message: '请选择结算币别', trigger: 'change' }],
        fpaymenttype: [{ required: true, message: '请选择结算方式', trigger: 'change' }],
        ftaxrateid: [{ required: true, message: '请选择默认税率', trigger: 'change' }],
        fpaycondition: [{ required: true, message: '请选择付款条件', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 币别
    handleCurrency(index) {
      if (index >= 0) {
        this.tableIndex = index
      } else {
        this.tableIndex = ''
      }
      this.currencyVisiblit = true
    },
    newly() {
      this.tableBankData.push({
        fcountrystring: '',
        fbankcode: '',
        fpaycurrencyname: '',
        fcurrencyid: '', // 币别id
        fbankholder: ''
      })
    },
    // 双击币别
    currencyData(item) {
      if (item.fsettleCurrId) { // 财务信息币别
        if (this.tableIndex === 0 ? true : this.tableIndex) {
          this.tableBankData[this.tableIndex].fcurrencyid = item.fsettleCurrId
          this.tableBankData[this.tableIndex].fpaycurrencyname = item.fsettleCurrIdName
        } else { // 银行卡币别
          this.financeInfo.fpaycurrencyname = item.fsettleCurrIdName
          this.financeInfo.fpaycurrencyid = item.fsettleCurrId
        }
      }
      this.currencyVisiblit = false
    },
    // 数据字典弹窗
    cliUnit(ev) {
      this.funit = ev
      this.unitVisabled = true
    },
    // 数据字典选中
    selUnit(ev) {
      if (ev.fid) {
        if (this.funit === 'SX_SETTLETYPE') { // 结算方式
          this.financeInfo.fpaymenttypename = ev.fname
          this.financeInfo.fpaymenttype = ev.fid
        } else if (this.funit === 'SX_INVOICETYPE') { // 发票类型
          this.financeInfo.finvoicetypeName = ev.fname
          this.financeInfo.finvoicetype = ev.fid
        } else if (this.funit === 'SX_TAXTYPE') { // 税分类
          this.financeInfo.ftaxtypeName = ev.fname
          this.financeInfo.ftaxtype = ev.fid
        } else if (this.funit === 'SX_V_UNIT_TAXRATEID') { // 默认税率
          this.financeInfo.ftaxratename = ev.fname
          this.financeInfo.ftaxrateid = ev.fid
        } else if (this.funit === 'SX_PAYCONDITION') { // 付款条件
          this.financeInfo.fpayconditionname = ev.fname
          this.financeInfo.fpaycondition = ev.fid
        } else if (this.funit === 'SX_TENDTYPE') { // 经营类型
          this.financeInfo.ftendtypeName = ev.fname
          this.financeInfo.ftendtype = ev.fid
        }
      }
      this.unitVisabled = false
    },
    // 银行账号(4位数一个空格)
    bankAccount(el, index) {
      this.tableBankData[index].fbankcode = el.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
    },
    // 删除
    handleDelete(index) {
      if (index === 0 && this.tableBankData.length === 1) {
        this.$message.warning('不能删除首行数据')
        return
      }
      this.tableBankData.splice(index, 1)
      this.$message.success('删除行成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.finance{
  @include listBom;
  padding: 0;
  .form{
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    .el-form-item{
      height: 35px;
      width: 33.3%;
      min-width: 238px;
      margin-bottom: 0;
      .input-width{
        min-width: 138px!important;
      }
    }
  }
  .el-icon-search{
    cursor: pointer;
  }
  .dialog-class ::v-deep .el-dialog__body{
    padding: 10px 20px;
  }
}
</style>
